<script setup>

import DynamicRouteMap from "@/components/DynamicRouteMap.vue";
import SectorBox from "@/components/SectorBox.vue";
import SectorBoxArea from "@/components/SectorBoxArea.vue";
import CountAndDelayedRate from "@/components/CountAndDelayedRate.vue";
import AnnualWarningAreaStatistics from "@/components/AnnualWarningAreaStatistics.vue";
</script>

<template>
  <div class="full-screen-div">
<!--    <div class="map">-->
<!--      <DynamicRouteMap/>-->
<!--    </div>-->
<!--    <div class="sector">-->
<!--      <SectorBoxArea/>-->
<!--    </div>-->
<!--  <CountAndDelayedRate/>-->
    <AnnualWarningAreaStatistics/>
  </div>
</template>

<style scoped>
*{
  padding:0;
  margin:0;
}
.full-screen-div {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
}
.map {
  width: 100%;
  height: 80%;
  background-color: #000000;
}

.sector {
  width: 100%;
  height:20%;
  background-color: #e0e3f1;
}
</style>